<template>
    <div class="roles_container">
      <div class="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>权限管理</el-breadcrumb-item>
          <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!--卡片视图-->
      <el-card class="box-card">
        <el-row :gutter="0">
          <el-col :span="3"><div class="grid-content bg-purple">
            <el-button type="primary" @click="addRolesDialogVisible=true">添加角色</el-button>
          </div></el-col>
        </el-row>
        <!--角色列表表格-->
        <el-table :data="rolesList" style="width: 100%" border stripe lazy>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-row v-for="(item1,i1) in scope.row.children" :key="item1.id" :class="['borderBottom',i1==0?'borderTop':'']">
                <!--渲染一级权限-->
                <el-col :span="5">
                  <el-tag>{{item1.authName}}</el-tag>
                  <i class="el-icon-caret-right"></i>
                </el-col>
                <!--渲染二级三级权限-->
                <el-col :span="19">
                  <el-row v-for="(item2,i2) in item1.children" :key="item2.id" :class="['borderTop',i2==0?'borderNone':'']">
                    <!--二级权限-->
                    <el-col :span="6">
                      <el-tag type="success" closable @close="deleteRolseRights(scope.row,item2.id,item2.authName)">{{item2.authName}}</el-tag>
                      <i class="el-icon-caret-right"></i>
                    </el-col>
                    <!--三级权限-->
                    <el-col :span="18" class="textAlignLeft">
                      <el-tag type="warning" closable v-for="(item3) in item2.children" :key="item3.id" @close="deleteRolseRights(scope.row,item3.id,item3.authName)">
                        {{item3.authName}}
                      </el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="#" type="index"></el-table-column>
          <el-table-column label="角色名称" prop="roleName"></el-table-column>
          <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.id)">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" @click="deleteRoles(scope.row.id)">删除</el-button>
              <el-button type="warning" icon="el-icon-delete" @click="allocationRights(scope.row)">分配权限</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!--分配权限的对话框-->
      <el-dialog title="分配权限" :visible.sync="setRightsDialogVisible" width="40%">
        <!--树型控件-->
        <el-tree ref="tree" :default-checked-keys="defKeys" default-expand-all show-checkbox :data="rightsTree" :props="treeProps" node-key="id"></el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="setRightsDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="roleAuthorization">确 定</el-button>
        </span>
      </el-dialog>
      <!--添加角色对话框-->
      <el-dialog title="添加角色" align="left" :visible.sync="addRolesDialogVisible" width="30%" @close="addformReset">
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="addForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="addForm.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <!--底部区-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addformReset">重置</el-button>
          <el-button @click="addRolesDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addRoles">确 定</el-button>
        </span>
      </el-dialog>
      <!--编辑角色对话框-->
      <el-dialog title="修改角色" align="left" :visible.sync="editRolesDialogVisible" width="30%">
        <el-form :model="editForm" :rules="addFormRules" ref="editFormRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="editForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="editForm.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editRolesDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editRoles">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
  import connector from '../../base/interface.js';
  export default {
        name: "Roles",
      data(){
          return{
            rolesList:[],
            /*分配权限对话框的显示与隐藏*/
            setRightsDialogVisible:false,
            /*添加角色对话框*/
            addRolesDialogVisible:false,
            /*编辑角色对话框*/
            editRolesDialogVisible:false,
            /*所有权限的数据,树型结构*/
            rightsTree:[],
            /*树型控件的属性绑定对象*/
            treeProps:{
              label:'authName',
              children:'children'
            },
            /*默认选中的节点id值*/
            defKeys:[],
            /*当前点击分配角色的id*/
            thisSelectRoleId:null,
            /*添加角色表单*/
            addForm:{roleName:'',roleDesc:''},
            editForm:{roleName:'',roleDesc:''},
            /*添加角色表单验证规则*/
            addFormRules:{
              roleName:[{required:true,message:'请输入角色名', trigger: 'blur'}],
              roleDesc:[{required:true,message:'请输入角色描述', trigger: 'blur'}]
            }
          }
      },
      methods:{
        getRolesList(){
          /*获取所有角色列表*/
          connector.getRolesList().then(res=>{
            var {data:data}=res;
            this.rolesList=data.data;
          });
        },
        deleteRolseRights(Rolse,RightsId,Info){
          /*删除角色指定权限*/
          this.$confirm(`此操作将移除该该角色的-- ${Info} --权限, 是否继续?`, '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
          }).then(() => {
            connector.deleteRolseRights(Rolse.id,RightsId).then(res=>{
              /*删除成功*/
              var {data:data}=res;
              /*重新赋值当前角色权限信息*/
              Rolse.children=data.data;
              this.$message({message:data.meta.msg,type:'success'});
            },error => {this.$message.error({message:data.meta.msg});})
          });
        },
        addformReset(){
          /*添加角色对话框关闭触发*/
          /*重置表单*/
          this.$refs.addFormRef.resetFields()
        },
        addRoles(){
          /*添加角色*/
          this.$refs.addFormRef.validate(vaild=>{
            if(!vaild)return;
            connector.addRoles(this.addForm).then(res=>{
              var {data:data}=res;
              this.$message({message:data.meta.msg,type:'success'});
              /*重置并关闭*/
              this.$refs.addFormRef.resetFields();
              this.addRolesDialogVisible=false;
              this.getRolesList();
            })
          });
        },
        showEditDialog(id){
          /*编辑角色按钮点击触发*/
          /*根据id查询角色信息*/
          connector.getRolesById(id).then(res=>{
            var {data:data}=res;
            this.editForm=data.data;
            this.editRolesDialogVisible=true;
          });
        },
        editRoles(){
          /*编辑角色*/
          this.$refs.editFormRef.validate(vaild=>{
            if(!vaild)return;
            connector.editRoles(this.editForm).then(res=>{
              var {data:data}=res;
              this.$message({message:'修改成功',type:'success'});
              /*重置并关闭*/
              this.editRolesDialogVisible=false;
              this.getRolesList();
            })
          });
        },
        deleteRoles(id){
          /*根据id删除角色*/
          this.$confirm('此操作将删除该角色, 是否继续?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
          }).then(() => {
            connector.deleteRolesById(id).then(res=>{
              /*删除成功*/
              var {data:data}=res;
              this.$message({message:data.meta.msg,type:'success'});
              this.getRolesList();
            });
          });
        },
        allocationRights(roles){
          /*分配权限*/
          /*保存当前角色id*/
          this.thisSelectRoleId=roles.id;
          /*获取所有权限数据*/
          connector.getRightsList('tree').then(res=>{
            var {data:data}=res;
            this.rightsTree=data.data;
            /*获取已有的权限*/
            this.defKeys=[];
            /*通过递归获取所有三级权限id*/
            this.getLeafKeys(roles,this.defKeys);
            this.setRightsDialogVisible=true;
          });
        },
        getLeafKeys(node,arr){
          /*通过递归形式,获取角色下所有三级权限id,保存到defKeys*/
          if(!node.children){
            /*当前节点为三级节点*/
            return arr.push(node.id);
          }
          node.children.forEach(item=>{
            this.getLeafKeys(item,arr);
          });
        },
        roleAuthorization(){
          /*角色授权*/
          /*所有选中的叶子节点和半选节点*/
          var allSelectLeafNode=this.$refs.tree.getCheckedNodes(false,true);
          var rids=[];
          for(var item of allSelectLeafNode){
            rids.push(item.id);
          }
          connector.roleAuthorization(this.thisSelectRoleId,rids).then(res=>{
            /*授权成功*/
            var {data:data}=res;
            this.$message({message:data.meta.msg,type:'success'});
            this.setRightsDialogVisible=false;
            /*重新获取数据*/
            this.getRolesList();
          })
        }
      },
      created() {
        this.getRolesList();
      }
    }
</script>

<style lang="scss" scoped>
.roles_container{
  .el-row{
    display: flex;
    align-items: center;
    text-align: center;
    .textAlignLeft{
      text-align: left;
    }
  }
  .el-tag{
    margin: 7px;
  }
  .borderTop{
    border-top: 1px solid #eee;
  }
  .borderBottom{
    border-bottom: 1px solid #eee;
  }
  .borderNone{
    border: none;
  }
}
</style>
